<template>
  <page-container :title='title'>
    <stat-info :wallet='wallet'/>
    <a-card :bordered='false' style='margin-top:24px'>
      <div class='ant-descriptions-title'>收入明细</div>
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='24'>
            <a-col :md='4' :sm='24'>
              <a-form-item>
                <a-input placeholder='请输入订单编号' v-model='queryParam.out_trade_no' />
              </a-form-item>
            </a-col>
            <a-col :md='4' :sm='24'>
              <span class='table-page-search-submitButtons'>
                <a-button type='primary' @click='handleSearch(true)' icon='search'>查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref='table'
        size='default'
        rowKey='id'
        :columns='columns'
        :data='loadData'
        showPagination='auto'
        :pageSize='5'
        :pagination='pagination'
      >
        <template slot='pay_type' slot-scope='text'>{{ text | payTypeFilter }}</template>
      </s-table>
    </a-card>
    <StewardWalletnfoTable></StewardWalletnfoTable>
  </page-container>
</template>

<script>
import { stewardWalletDetail } from '@/api/stat'
import formTableMixin from '@/mixins/formTableMixin'
import payStatusMixin from '@/mixins/payStatus'
import StatInfo from '@/components/stat-info/stat-info'
import StoreInfoItem from '@/components/StoreInfoItem'
import StewardWalletnfoTable from '@/views/wallet/modules/StewardWalletnfoTable'

const columns = [
  {
    title: '交易单号',
    dataIndex: 'out_trade_no'
  },
  {
    title: '来源',
    dataIndex: 'from_type',
    customRender(text) {
      return FORM_TYPE_MAP[text]
    }
  },
  {
    title: '价格',
    dataIndex: 'price',
    customRender(text) {
      return '￥' + text
    }
  },
  {
    title: '支付方式',
    dataIndex: 'pay_type',
    scopedSlots: { customRender: 'pay_type' }
  },
  {
    title: '交易时间',
    dataIndex: 'ctime'
  },
  {
    title: '备注',
    dataIndex: 'remark'
  }
]

const FORM_TYPE_MAP = {
  clothes: '洗衣',
  appliance: '家电',
  house: '家政',
  goods: '商城',
  vip: '会员'
}

export default {
  name: 'StewardWalletDetail',
  mixins: [formTableMixin, payStatusMixin],
  components: {
    StatInfo,
    StoreInfoItem,
    StewardWalletnfoTable
  },
  data() {
    this.columns = columns
    this.listAction = parameter => {
      return stewardWalletDetail(parameter).then(res => {
        this.storeInfo = res.data.store
        this.wallet = res.data.cnt || {}
        return res
      })
    }
    return {
      storeInfo: {},
      wallet: {},
      title: this.$route.query.name + '的统计详情'
    }
  },
}
</script>
